<template>  
    <view class="container">
		<view class="user-section" v-if="hasLogin != ''">
			<image class="bg" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/misan.png"></image>
			<view class="user-info-box" @click="navTo('/package/notice/notice')">
				<view class="portrait-box"> 
					<image class="portrait" :src="userlist.avatar || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text class="username">{{userlist.nick || '游客'}}</text>
				</view>
				<view class="caty-zuye" @click="navTo('/pages/user/personal')">
					<text class="">个人主页</text>  
					<van-icon name="arrow" />
				</view>
			</view>
		</view>
		<view class="user-section" v-else @click="navTo">
			<image class="bg" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/misan.png"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" src='/static/missing-face.png'></image>
				</view>
				<view class="info-box">
					<text class="username">未登录</text>
				</view>
				<view class="caty-zuye">
					<text class="">个人主页</text>
					<van-icon name="arrow"/>
				</view>
				
			</view>  
			
		</view>
	
		<view 
			class="cover-container"
			:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
			@touchstart="coverTouchstart"
			@touchmove="coverTouchmove"
			@touchend="coverTouchend"
		>
			<view class="tj-sction">
				<view class="tj-item" @click="navTo('/package/serve/attention?type=attention')">
					<text class="num">{{userlist.userCounter.followNumber}}</text>
					<text>关注</text>
				</view>
				<view class="tj-item" @click="navTo('/package/detail/footprint?type=hide')">
					<text class="num">{{userlist.userCounter.favoritesNumber}}</text>
					<text>收藏</text>
				</view>
				<view class="tj-item" @click="navTo('/package/serve/attention?type=bean')">
					<text class="num">{{userlist.userCounter.fanNumber}}</text>
					<text>粉丝</text>
				</view>
			</view>
			
			<view style="background-color: #f9f9f9; padding: 0 30rpx;">

			<!-- 订单 -->
			<view class="caty-oder">
			<text class="caty-upiner">我的订单</text> 
			<view class="order-section">
				
				<view @click="navTo('/package/order/order')" hover-class="common-hover"  :hover-stay-time="50">
					<image class="yticon" src="@/static/icon/order-form.png" mode=""></image> 
				<text class="caty-orde">商品订单</text> 
				</view>
			 
				<view @click="navTo('/package/set/suggest')"  hover-class="common-hover" :hover-stay-time="50">
					<image class="yticon" src="@/static/icon/serve-form.png" mode="" ></image>
					<text class="caty-orde">服务订单</text>
				</view>
			</view>
			</view>
			<!-- 个人中心 -->
			<view class="caty-oder">
			<text class="caty-upiner">个人中心</text> 
			<view class="order-section">
				<view class="order-item" @click="navTo('/package/address/address')" hover-class="common-hover"  :hover-stay-time="50">
					<image class="caty-ixinpig" src="@/static/icon/dizhi.png" mode=""></image> 
				<text>我的地址</text>
				</view>
			 
				<view class="order-item" @click="navTo('/package/address/wallet')"  hover-class="common-hover" :hover-stay-time="50">
					<image class="caty-icon" src="@/static/icon/wallet.png" mode="" ></image>
					<text>我的钱包</text>
				</view>
				<view class="order-item" @click="navTo('/package/detail/footprint?type=footprint')"  hover-class="common-hover" :hover-stay-time="50">
					<image class="caty-icon" src="@/static/icon/footprint.png" mode="" ></image>
					<text>我的足迹</text>
				</view>
			</view>
			</view>
			<!-- 更多功能 -->
			<view class="caty-oder">
			<text class="caty-upiner">更多功能</text>
			<view class="order-sect">
				<view class="order-item" @click="navTo('/packageB/Customer/Customer')" hover-class="common-hover" :hover-stay-time="50">
					<image class="caty-icon" src="@/static/icon/service.png" mode=""></image> 
				<text>客服中心</text>
				</view>
				<view class="order-item" @click="navTo('/package/set/set')"  hover-class="common-hover" :hover-stay-time="50">
					<image class="caty-icon" src="@/static/icon/setting-up.png" mode=""></image>
					<text>设置</text>
				</view>
			</view>
			</view>
			 </view>
		</view>
			
		
    </view>  
</template>  
<script>  
	import roles from '@/http/roles.js'
    import { mapState } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
	
		data(){
			return {
				hasLogin:'',
				userlist:[],
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
			}
		},
		onLoad(){
			this.loacdeh()
			this.loachgeitb()
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/package/set/set');
			}else if(index === 1){
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
			}
		},
		// #endif
  //       computed: {
		// 	...mapState(['hasLogin','token'])
		// },
		onShow() {
			this.loachgeitb()
			this.loacdeh()
		},
        methods: {
			loacdeh(){
				this.hasLogin = uni.getStorageSync('token') || '';
			},
            async loachgeitb(){
				const res = await roles.userinfo()
				this.userlist = res.data
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				if(!this.hasLogin){
					url = '/pages/public/login';
				}
				uni.navigateTo({  
					url
				})  
			}, 
	
			coverTouchstart(e){
				if(pageAtTop === false){
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e){
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if(moveDistance < 0){
					this.moving = false;
					return;
				}
				this.moving = true;
				if(moveDistance >= 80 && moveDistance < 100){
					moveDistance = 80;
				}
		
				if(moveDistance > 0 && moveDistance <= 80){
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend(){
				if(this.moving === false){
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
        }  
    }  
</script>  
<style lang='scss'>
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
   .caty-zuye{
	   display: inline-block;
	   position: absolute;
	   right: 30rpx;
	   font-size: 24rpx;
	   color: #999999;
   }
	.user-section{
		height: 520upx; 
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180upx;
		margin-top: 50rpx;
		display:flex;
		align-items:center;
		position:relative;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
	}
	.cover-container{
		margin-top: -150upx;
		position:relative;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		display: flex;
		justify-content: space-around;
		align-content: center;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.caty-oder{
		background-color: #fff;
		margin-top: 20upx;
		padding-top: 30rpx;
		border-radius: 25rpx;
	}
	.caty-upiner{
		margin-top: 20upx;
		margin-left: 40upx;
		font-size: 32rpx;
		color: #000;
		font-weight: bold; 
	}
	.order-section{
		@extend %section;
		padding: 28upx 0;
		.order-item{
					@extend %flex-center;
					width: 120upx;
					height: 120upx;
					border-radius: 10upx;
					font-size: $font-sm;
					color: $font-color-dark;
				}
	}
	.order-sect{
		display: flex;
		align-content: center;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 28upx 50rpx; 
		.order-item{
					@extend %flex-center;
					width: 120upx;
					height: 120upx;
					border-radius: 10upx;
					font-size: $font-sm;
					color: $font-color-dark;
				}
	}
	.caty-orde{
		display: inline-block;
		color: #1d1d1d;
		font-size: 25rpx;
		font-weight: 500;
		transform: translateY(-130%);
	}
	.yticon{
		width: 104rpx;
		height: 104rpx;
	}
	.caty-ixinpig{
		width: 40rpx;
		height: 45rpx;
		margin-bottom: 20rpx; 
	}
	.caty-icon{
		 width: 55rpx;
		 height: 60rpx;
		 margin-bottom: 20rpx; 
	}

</style>